import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'


const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import('../views/AboutView.vue')
    },
    {
      path:'/canvas',
      name:'canvas',
      redirect:'/canvas/plum',
      component: () => import('../views/canvas/index.vue'),
      children:[
        {
          path: 'plum',
          name: 'plum',
          component: () => import('../views/canvas/plum/index.vue')
        }
      ]
    },
    {
      path:'/demo-collection',
      name:'demo-collection',
      component:()=>import('../views/demo-collection/index.vue'),
      children:[
        {
          path:'globalProperty',
          name:'globalProperty',
          component: () => import('../views/demo-collection/globalProperty/index.vue')
        },
        {
          name:'storge-demo',
          path:'storge-demo',
          component: () => import('../views/demo-collection/stroge-demo/index.vue')
        },
        {
          path: 'simple-crud',
          name: 'simple-crud',
          component: () => import('../views/demo-collection/simple-crud/index.vue'),
        },
        {
          path:'article',
          name:'article',
          component: () => import('../views/demo-collection/article/index.vue'),
          children:[
            // {
            //   path:'details/:id',
            //   name:'details',
            //   component: () => import('../views/demo-collection/article/details/index.vue')
            // }
          ]
        },
        {
          path:'todo-list',
          name:'todo-list',
          component: () => import('../views/demo-collection/todo-list/index.vue')
        },
        {
          name:'file',
          path:'file',
          component: () => import('../views/demo-collection/file/index.vue')
        },
        { // 放在 article 的同级, 为了显示起来不那么拥挤 
          path:'details/:id',
          name:'details',
          component: () => import('../views/demo-collection/article/details/index.vue')
        }
      ]
    },
    {
      path:'/game',
      name:'game',
      redirect:'/game/gomoku',
      component: () => import('../views/game/index.vue'),
      children:[
        {
          path:'gomoku',
          name:'gomoku',
          component: () => import('../views/game/gomoku/index.vue')
        }
      ]
    }
  ]
})

export default router
